<template>
  <div>
    <van-popup :value="show" position="bottom" @input="$emit('update:show', $event)">
      <div class="van-popup-content">
        <van-tabs v-model="active" line-width="78">
          <template #nav-right>
            <img src="@/assets/service.png" alt="" class="service-icon">
          </template>

          <van-tab title="常用功能">
            <div class="tab-content grid">
              <div class="function-item" v-for="(item, index) in functions" :key="index">
                <div><img :src="item.icon" alt=""></div>
                <span>{{ item.name }}</span>
              </div>
            </div>
          </van-tab>
          <van-tab title="教学中心">
            <div class="tab-content">教学中心</div>
          </van-tab>
        </van-tabs>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Popup, Tabs, Tab } from "vant";

export default {
  name: 'Filtrate',
  components: {
    [Popup.name]: Popup,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      active: 0,
      functions: [
        { name: '帮助设置', icon: require('@/assets/fun1.png') },
        { name: '计算器', icon: require('@/assets/fun2.png') },
        { name: '资金划转', icon: require('@/assets/fun3.png') },
        { name: '小额兑换', icon: require('@/assets/fun4.png') },
        { name: '交易记录', icon: require('@/assets/fun5.png') },
        { name: '一键还债', icon: require('@/assets/fun6.png') },
        { name: '合约冷静期', icon: require('@/assets/fun7.png') },
        { name: '市场信息', icon: require('@/assets/fun8.png') },
        { name: '手续费', icon: require('@/assets/fun9.png') },
        { name: '交易数据', icon: require('@/assets/fun10.png') },
        { name: '取消自选', icon: require('@/assets/fun11.png') },
        { name: '模拟交易', icon: require('@/assets/fun12.png') },
        { name: '合约分析', icon: require('@/assets/fun13.png') },
      ]
    }
  },
  methods: {
    handleClick(index) {
      this.active = index;
      this.$emit('select', this.options[index]);
      this.$emit('update:show', false);
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-popup {
  // width: 92% !important;
  background: #121212 !important;
  border-radius: 40px 40px 0 0;

  .van-popup-content {
    padding: 40px 0px;
    padding-bottom: 60px;
    background: #121212;
    color: #fff;
    display: grid;
    gap: 20px;
    position: relative;
    overflow: hidden;


    .van-tabs__wrap {
      border-bottom: 2px solid #212121;
      padding: 0 50px;

      .van-tabs__nav {
        background-color: #121212;
        gap: 40px;
        position: relative;

        .service-icon {
          width: 42px;
          height: 42px;
          position: absolute;
          right: 0;
          transform: translateY(15px);
        }

        .van-tab {
          flex: inherit;
          color: #929292;
        }

        .van-tab--active {
          color: #fff;
        }

        .van-tabs__line {
          background-color: #fff;
        }
      }
    }

    .tab-content {
      padding: 34px;
      margin-top: 20px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 50px;

      >div {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 22px;

        >div {
          width: 96px;
          height: 96px;
          border-radius: 10px;
          background: #242424;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        font-size: 24px;
        color: #C0C0C0;
      }
    }
  }
}
</style>